<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <!-- <label for="id">
                      编号：
                    </label>
                    <input type="text" id="id" v-model='id'> -->
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model.trim='name'>
                        <button @click='handle'>新增</button>
                        <button @click='myedit'> 编辑</button>
                    </div>
                </div>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in books' :key="index">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date |format('yyyy-MM-dd')}}</td>
                        <td>
                            <a href="" @click.prevent='mychange(item.id)'>修改</a>
                            <span>|</span>

                            <!-- delete  不能用 -->
                            <a href="" @click.prevent='mydelete(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

           /*
         第一步     输入框动态绑定输入的值
        
        */

          // 定义全局过滤器  每一个实例对象都可以使用
          Vue.filter("format",function(val,arg) {
            if(arg=='yyyy-MM-dd') {
                 let ret='';
              let year=val.getFullYear()
              let month= val.getMonth()+1
              let days= val.getDate()
              console.log(year, month,days)   
              ret=`${year}年-${month}月-${days}号`
              return   ret
            }
            return val

        })

      var vm = new Vue({
        el: "#app",
        data: {
          msg: "vue",
          name:'',
          id:'',
          books: [{
                    id: 1,
                    name: '三国演义',
                    date: new Date()
                }, {
                    id: 2,
                    name: '水浒传',
                    date: new Date()
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: new Date()
                }, {
                    id: 4,
                    name: '西游记',
                    date: new Date()
                }]
        },
        methods: {
            handle(){
                let obj = {}
                obj.name = this.name

                //id  计算   分开写
                let id = this.books.length;
                id++;

                obj.id = id
                obj.date = new Date()
                console.log(obj);

              this.books.push(obj)
              this.name = ''


            },
            //先修改
            mychange(id){
                let newArr = this.books.filter(item =>item.id == id)
                this.name = newArr[0].name
                this.id = newArr[0].id
            },
            // 编辑
            myedit(){
                let{id,name}=this
                // this.books.forEach(item=>{
                //     if(item.id==id){
                //         item.name=name
                //     }
                // })
                //用过滤写
                this.books = this.books.filter(item=>{
                    if(item.id==id){
                        item.name = name
                        return true
                    }
                    return true
                })
                this.name=''
            },
            //删除
            mydelete(id){
                // 方式一
                // let newArr = this.books.filter((item,index)=>{
                //     if(item.id!=id){
                //         return true
                //     }
                // })
                // this.books=newArr

                // 方式二
                this.books = this.books.filter(item => item.id != id)
            },
        },
      });
    </script>
  </body>
</html>
